<template>
  <div class="info-container">
    <el-card style="height: 100%">
      <search-tool @onSearch="handleSearch"></search-tool>
      <div class="addmore">
        <el-button type="primary" @click="addMore">上传作业票证</el-button>
      </div>
      <div class="main_file">
        <div class="file" v-for="(item, index) in List" :key="index">
          <img
            v-if="item.type == '表格'"
            src="../../../../assets/images/excel.png"
            alt=""
          />
          <img
            v-if="item.type == '文档'"
            src="../../../../assets/images/word.png"
            alt=""
          />
          <img
            v-if="item.type == 'pdf'"
            src="../../../../assets/images/pdf.png"
            alt=""
          />
          <div class="file_btm">
            <div>名称:{{ item.fileName }}</div>
            <div>文档类型:{{ item.type }}</div>
            <div>上传时间:{{ item.updatedTime }}</div>
          </div>
          <div class="file_handle">
            <el-icon
              size="20"
              color="#aaaaaa"
              style="width: 100%; padding: 0px 20px"
            >
              <div style="display: flex; justify-content: space-around">
                <Delete @click="deletea(item)" color="#e8574a" />
                <Download @click="downa(item)" color="#29d05b" />
              </div>
            </el-icon>
          </div>
        </div>
      </div>
    </el-card>
    <add-dialog
      :title="dialogTitle"
      :rowData="curRowData"
      :visible="visibleDialog"
      @onReload="reloadPage"
      @onCloes="onCloes"
    ></add-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import SearchTool from './components/SearchTool/index'
import AddDialog from './components/AddDialog/index'
import { Delete, Download } from '@element-plus/icons-vue'
import { ListJobticket, JobticketDel } from '@/api/back'
import { ElMessageBox } from 'element-plus'
import { message } from '@/utils/message'

const params = ref({
  fileName: '',
  type: '',
  uploadEndTime: '',
  uploadStartTime: ''
})
const curRowData = ref({})
const visibleDialog = ref(false)
const List = ref({})
const dialogTitle = ref('')
const handleSearch = (parmas) => {
  params.value.fileName = parmas.fileName
  params.value.type = parmas.type
  params.value.uploadStartTime = parmas.time[0]
  params.value.uploadEndTime = parmas.time[1]
  getListData(params.value)
}
const getListData = async (params) => {
  let res = await ListJobticket(params)
  List.value = res
}
getListData(params.value)
const addMore = () => {
  curRowData.value = {}
  visibleDialog.value = true
  dialogTitle.value = '上传作业票据'
}
const reloadPage = () => {
  getListData(params)
  visibleDialog.value = false
}
const deletea = async (item) => {
  ElMessageBox.confirm('确定删除此文件吗?', '删除文件', {
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  })
    .then(() => {
      // 删除
      deleac(item.id)
    })
    .catch(() => {
      // catch error
    })
}
const deleac = async (id) => {
  let resa = await JobticketDel(id)
  message({ type: 'success', message: '删除成功!' })

  getListData(params.value)
}

const downa = (item) => {
  ElMessageBox.confirm('是否下载此文件?', '下载文件', {
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  })
    .then(() => {
      // 删除
      const url = item.fileUrl
      const filename = item.fileName
      const download = new XMLHttpRequest()
      download.open('GET', url, true)
      download.responseType = 'blob'
      download.onload = (e) => {
        const url = window.URL.createObjectURL(download.response)
        const a = document.createElement('a')
        a.href = url
        a.download = filename
        a.click()
      }
      download.send()
    })
    .catch(() => {
      // catch error
    })
}
const onCloes = () => {
  visibleDialog.value = false
}
</script>

<style lang="scss" scoped>
.info-container {
  width: 100%;
  height: 100%;
  .pagination {
    width: 100%;
    height: 32px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: end;
  }
  .action-row {
    display: flex;
  }
  .main_file {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    // justify-content: space-around;
  }
  .file {
    width: 18%;
    border: 1px solid rgba(121, 121, 121, 1);
    text-align: center;
    margin: 0px 1%;
    padding: 20px;
    .file_btm {
      font-size: 16px;
      text-align: left;
    }
  }
}
</style>
